<template>
  <section class="max-w-7xl mx-auto px-6 mb-12">
    <div class="text-center mb-12">
      <div v-if="icon" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-900/50 to-purple-900/50 rounded-full mb-4 border border-blue-800/30">
        <svg class="w-5 h-5 text-blue-400 mr-2" fill="currentColor" viewBox="0 0 20 20" v-html="icon"></svg>
        <span class="text-sm font-medium text-blue-300">{{ subtitle }}</span>
      </div>
      <h2 class="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-4">
        {{ title }}
      </h2>
      <p class="text-gray-300 text-lg max-w-2xl mx-auto mb-8 font-medium">
        {{ description }}
      </p>
    </div>

    <LoadingSpinner v-if="isLoading" />

    <div v-else-if="movies && movies.length > 0">
      <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6 mb-12">
        <div
          v-for="(movie, index) in movies.slice(0, 8)"
          :key="movie.id"
          class="movie-card group cursor-pointer animate-fade-in-up"
          :style="{ 'animation-delay': `${index * 0.1}s` }"
          @click="$router.push(`/movie/${movie.id}`)"
        >
          <div class="relative aspect-[2/3] bg-gradient-to-br from-slate-700 via-slate-600 to-slate-800 flex items-center justify-center overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-all duration-300 group-hover:scale-105">
          <!-- 背景装饰 -->
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/20"></div>
          <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
          
          <!-- 播放图标 -->
          <div class="relative z-10 w-20 h-20 bg-white/10 backdrop-blur-sm rounded-full flex items-center justify-center group-hover:bg-white/20 transition-all duration-300 group-hover:scale-110">
            <svg class="w-8 h-8 text-white/80 group-hover:text-white transition-colors duration-300 ml-1" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
            </svg>
          </div>
          
          <!-- AI推荐标签 -->
          <div v-if="movie.predicted_rating" class="absolute top-4 left-4 bg-gradient-to-r from-emerald-500 to-blue-500 text-white px-3 py-1.5 rounded-full text-xs font-bold flex items-center shadow-lg backdrop-blur-sm">
            <svg class="w-3 h-3 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/>
            </svg>
            AI推荐
          </div>
          
          <!-- 评分标签 -->
          <div class="absolute bottom-4 right-4 bg-black/60 backdrop-blur-sm text-white px-3 py-1.5 rounded-full text-sm font-bold shadow-lg flex items-center">
            <svg class="w-4 h-4 mr-1.5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
            </svg>
            {{ movie.predicted_rating ? movie.predicted_rating.toFixed(1) : movie.average_rating.toFixed(1) }}
          </div>
          
          <!-- 悬停效果 -->
          <div class="absolute inset-0 bg-gradient-to-t from-blue-600/20 to-purple-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        </div>
        
        <div class="p-5">
          <h3 class="text-lg font-bold text-gray-100 mb-2 truncate group-hover:text-blue-400 transition-colors duration-300 leading-tight">{{ movie.title }}</h3>
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-400 font-medium">{{ movie.year }}</span>
            <div class="flex items-center space-x-1">
              <div class="flex items-center text-yellow-400">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
                </svg>
                <span class="ml-1 text-sm font-bold">{{ movie.average_rating.toFixed(1) }}</span>
              </div>
            </div>
          </div>
        </div>
        </div>
      </div>
      
      <!-- 查看更多按钮 -->
      <div v-if="movies.length > 8" class="text-center">
        <router-link :to="title.includes('推荐') ? '/recommendations' : '/movies'" class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl font-semibold hover:from-blue-700 hover:to-purple-700 transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105 group">
          <span class="mr-2">查看更多</span>
          <svg class="w-5 h-5 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
          </svg>
        </router-link>
      </div>
    </div>

    <div v-else class="text-center py-16 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-8 max-w-3xl mx-auto border border-gray-700">
      <div class="w-20 h-20 bg-gradient-to-r from-blue-900/50 to-purple-900/50 rounded-full flex items-center justify-center mx-auto mb-6">
        <svg class="w-10 h-10 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
        </svg>
      </div>
      <h3 class="text-2xl font-semibold text-gray-100 mb-3">{{ emptyStateTitle }}</h3>
      <p class="text-gray-400 mb-8 max-w-md mx-auto">{{ emptyStateMessage }}</p>
      <router-link :to="emptyStateButtonRoute || '/movies'" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-lg font-medium hover:from-blue-600 hover:to-purple-600 transition-all duration-300 shadow-lg hover:shadow-xl">
        {{ emptyStateButtonText }}
      </router-link>
    </div>
  </section>
</template>

<script setup lang="ts">
import type { Movie, Recommendation } from '@/types';
import LoadingSpinner from './LoadingSpinner.vue';

defineProps<{
  title: string;
  subtitle: string;
  description: string;
  movies: (Movie | Recommendation)[];
  isLoading: boolean;
  icon?: string;
  emptyStateTitle: string;
  emptyStateMessage: string;
  emptyStateButtonText: string;
  emptyStateButtonRoute?: string;
}>();
</script>